<template>
	<view>
		<!-- grace filter start -->
		<view class="grace-filter" :style="{position:fixed?'fixed':'relative','top':fixed?CustomBar + 'px':top}" id="grace-filter-header">
			<view class="items flex align-center" :class="activeIndex==index?'text-theme':'text-back'" v-for="(item, index) in filters" :key="index" 
				:data-index="index" @tap="changeSort">
				<text class="text-df" v-if="item.filterType!=2">{{ item.title }}</text>
				<text class="text-df text-bold" v-else>{{ activeOption && activeOption.name || item.title }}</text>
				<text class="grace-iconfont icon-arrow-down" v-if="item.filterType==2"></text>
				<text class="grace-iconfont" v-else-if="item.filterType==0"></text>
				<image src="../../static/images/mall/sort0.png" mode="widthFix" v-else-if="activeIndex!=index"></image>
				<image src="../../static/images/mall/sort2.png" mode="widthFix" v-else-if="activeIndex==index && activeAscState"></image>
				<image src="../../static/images/mall/sort1.png" mode="widthFix" v-else-if="activeIndex==index"></image>
			</view>
			<!-- <view class="text-xxl padding-lr margin-top-sm"  @tap="changeShape" v-if="showShape" style="flex: 1;display: flex;justify-content: flex-end;">
				<text :class="['text-black', curShapeValue == 2 ? 'cuIcon-apps' : 'cuIcon-list']"></text>
			</view> -->
			<view class='grace-filter-options ' v-if="activeIndex == index && showOption" v-for="(item, index) in filters" :key="index">
				<view :class="[activeOption && (opt.value ===  activeOption.value) ? 'option current' : 'option']" 
					:data-index="index" :data-optindex="optIndex" v-for="(opt, optIndex) in item.options||[]" :key="optIndex" @tap="changeSort" 
					class="text-sm">
					{{opt.name}}
				</view>
			</view>
		</view>
		<!-- <view class="bg-mask" style="width: 100%;flex:1"></view> -->
	</view>
</template>

<script>
export default {
	computed: {
		style() {
			var StatusBar= this.StatusBar;
			var CustomBar= this.CustomBar;
			var bgImage = this.bgImage;
			var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
			if (this.bgImage) {
				style = `${style}background-image:url(${bgImage});`;
			}
			return style
		}
	},
	props: {
		// 是否固定至顶部
		fixed:{
			type : Boolean,
			default :function() {
				return false
			}
		},
		// 固定至顶部时离顶部的距离
		top:{
			type : String,
			default :function() {
				return "0upx"
			}
		},
		filters:{
			type : Array,
			default :function() {
				return []
			}
		},
		initIndex:{
			type : Number,
			default :function() {
				return 0
			}
		},
		// 显示的模板类型值，1：为单列，2：为多列
		shapeValue:{
			type : Number,
			default :function() {
				return 2
			}
		},
		// 是否显示模板类型选择
		showShape:{
			type : Boolean,
			default :function() {
				return true
			}
		}
	},
	data() {
		return {
			// 当前激活索引
			activeIndex:0,
			// 默认升序
			activeAscState:true,
			//默认两列布局图标
			curShapeValue:2,
			showOption:false,
			activeOption:null,
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar
		}
	},
	created: function(event) {
		this.curShapeValue=this.shapeValue
		this.activeIndex=this.initIndex
		//console.log("this.activeIndex:",this.activeIndex)
	},
	methods: {
		//排序更改事件
		changeSort:function(e){
			const index=parseInt(e.currentTarget.dataset.index);
			const optIndex = e.currentTarget.dataset.optindex;
			const options= this.filters[index].options;
			let option=null;
			if(options && optIndex){
				option=options[parseInt(optIndex)]
			}
			
			const curActiveItem=this.filters[index]
			const filterType=curActiveItem.filterType || 0
			// 点击索引等于自身
			if(this.activeIndex==index){
				//禁用升降序，则直接返回无需处理
				if(curActiveItem.filterType==0) return
			}
			
			// 升降序
			if(curActiveItem.filterType==1){
				if(this.activeIndex==index){
					//排序顺序颠倒
					this.activeAscState=!this.activeAscState
				} else {
					this.activeAscState=curActiveItem.initAscState||false
				}
			}
			// 下拉选项
			else if(curActiveItem.filterType==2){
				console.log('curActiveItem.filterType:',curActiveItem.filterType)
				if(this.activeIndex!=index){
					// 点击的不是本列
					this.showOption=true
					//this.activeOption=null
				} else if(this.activeIndex==index && option ==null){
					// 点击的本列下拉箭头，则切换显示状态并返回
					this.showOption=!this.showOption
					return;
				} else {
					// 点击了选项，则关闭显示以便显示查询结果
					this.showOption=false
					this.activeOption=option
					console.log('this.activeOption:',this.activeOption)
				}
			}
			this.activeIndex=index
			if(curActiveItem.filterType==2 && this.showOption){
				// 下拉显示面板，不进行过滤
				return;
			}
			const sortField = curActiveItem.value !== undefined ? curActiveItem.value:index
			var data={"sort":sortField,"order":this.activeAscState?1:-1,"option": this.activeOption && this.activeOption.value || null}
			console.log("this.activeOption",data)
			this.$emit("sortChanged",data)
		},
		changeShape:function(){
			this.curShapeValue=this.curShapeValue==1?2:1
			this.$emit("shapeChanged",this.curShapeValue)
		}
	}
};
</script>
<style>
.grace-filter .items{
	flex:1;
}
.grace-filter .items uni-text.text-df{
	font-size:30upx
}
.grace-filter .items image{width:16rpx; height:16rpx;}
.position-relative{
	position: relative;
}
.position-fixed{
	position: fixed;
}
/* #ifdef  H5 */
.grace-filter-top{
    top:44px;
}
/* #endif */
.text-theme{
	color: #cb1414;
}
</style>
